//1.导入vue
import Vue from 'vue'
//导入公共组件
import app from './app.vue'
//导入路由
import router from './router.js'

import './css/app.scss'

//导入mui模块
import './lib/mui/css/mui.min.css'
//导入mui扩展的图标
import './lib/mui/css/icons-extra.css'
//导入mint-ui
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'

//导入vue-resource模块
import VueResource from 'vue-resource'
Vue.use(VueResource);
//全局配置请求的根路径
Vue.http.options.root = 'http://www.liulongbin.top:3005/'
//配置post请求时表单数据的格式为普通表单格式
Vue.http.options.emulateJSON = true;

//导入时间插件
import moment from 'moment'

Vue.filter('dateFormat',function (dateStr,pattern='YYYY-MM-DD HH:mm:ss') {
    //参数①：需要格式化的时间的数据
    //参数②：时间的格式
    return moment(dateStr).format(pattern);
})

//导入图片预览插件
import VuePreiview from 'vue-preview'
Vue.use(VuePreiview)

import Vuex from 'vuex'
Vue.use(Vuex)

//每次加载页面时，从本地存储获取数据
let car = JSON.parse(localStorage.getItem('list') || '[]')

let store = new Vuex.Store({
    state:{
        car
    },
    mutations:{
        //1.点击添加到购物车，把信息保存到store中的数据中
        addToCar(state,obj){
            // console.log(state)
            //分析：如果有对应的商品，只需要更新数据
            //没有，直接添加进去
            let flag = false;

            state.car.some( item => {
                if (item.id == obj.id){
                    flag = true;
                    item.count += obj.count;
                    return true;
                }
            })
            //如果没有找到，直接添加
            if (!flag){
                state.car.push(obj);
            }
            // console.log(state.car)

            //存到loaclStrong里面去
            localStorage.setItem('list',JSON.stringify(state.car))
        },
        //4.更新商品的数量
        updateCount(state,obj){
            state.car.some( item => {
                //判断id是否一致
                if (item.id == obj.id){
                    item.count = parseInt(obj.count);
                    return true;
                }
            })
            localStorage.setItem('list',JSON.stringify(state.car))
        },
        //5.删除数量
        removeGoods(state,id){
            state.car.some( (item,i) => {
                if (item.id = id){
                    state.car.splice(i,1)
                    return true;
                }
            })
            localStorage.setItem('list',JSON.stringify(state.car))
        },
        //6.更新商品的状态
        updateSelected(state,obj){
            state.car.some( item => {
                if (item.id == obj.id){
                    item.selected = obj.selected;
                    return true;
                }
            })
            localStorage.setItem('list',JSON.stringify(state.car))
        }
    },
    getters:{
        //2.计算徽标
        getCount(state){
            let sum = 0;
            state.car.forEach( item => {
                sum += item.count;
            });
            return sum;
        },
        //3.获取商品数量的方法
        getGoodsCount(state){
            //{ 88:3,89:5 }
            let num = {};
            state.car.forEach( item => {
                num[item.id] = item.count;
            })
            return num;
        },
        //7.计算总价
        getTotal(state){
            let num = {
                count:0,//存储数量
                allPrice:0//总价
            }
            state.car.forEach( item => {
                //判断商品为选中的状态
                if (item.selected){
                    num.count += item.count;
                    num.allPrice += item.count * item.price;
                }
            })
            return num;
        }
    }
})

/*
* 尝试在自己的手机上进行项目的预览和调试
* 1.保证手机和开发项目的电脑处于同一wifi环境中
* 2.在项目 package.json文件中 dev 脚本 添加一个指令   --host wifi的ip地址
* */

let vm = new Vue({
    el:'#app',
    render:c => c(app),
    router,
    store
})